/***
 * page layout
 */
html {
	font-family: sans-serif;
	font-size: 14px;
	line-height: 1.3em;
	padding-bottom: 1em;
}

#menu {
	border-right: 2px black dotted;
	background-color: #fffee4;
	position: fixed;
	left: 0px;
	top: 0px;
	padding: .4em;
	text-align: left;
	width: 17em;
	padding-left: .5em;
	height: 100%;
}
#menu a, #menu button { display: block; text-decoration: none; }
#menu a:hover, #menu button:hover { background-color: #ff0; }
#menu strong { display: block; text-align: center; margin-top: .5em; }
#menu em { font-weight: bold; font-style: normal; }
#menu button {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	background-color: transparent;
	color: blue;
	font-size: 1em;
	padding: 0;
	cursor: pointer;
	font-family: sans-serif;
}
#menu input { margin-right: .5em; }
/* Use an absolute menu if the screen isn't tall enough to display the entire menu.
 * From http://www.w3.org/Style/CSS/ */
@media screen and (max-height: 30em) { body div#menu {position: absolute} }

#content { margin-left: 19em; }

#errormsg { border: 1px solid red; background-color: #eee; color: red; }

/***
 * Defaults
 */
h1 { font-size: 1.2em; }
table { border-collapse: collapse; }
th { background-color: #ddd; }

a { color: blue; }
a:visited { color: blue; }

fieldset { width: 50em; }
label, .label {
	display: inline-block;
	width: 15em;
	margin-bottom: .3em;
}

select { margin-bottom: .3em; margin-top: .3em; }
input[type=text], input[type=password], input[type=submit], select, textarea {
	border: 1px solid #b7b7b7;
	padding: .3em .4em;
	margin-bottom: .5em;
}

.inline { display: inline; }

/***
 * login & settings.php
 */
#login input[type=text], input[type=password] {
	width: 20em;
}

#settings label { width: 20em; }
#settings input[type=text], input[type=password] {
	width: 20em;
}

#login .formhelp {
	max-width: 45em;
	left: 16.5em;
}

#settings .formhelp {
	max-width: 30em;
	left: 41.5em;
}

.formhelp {
	display: inline-block;
	padding: .2em .4em;
	background-color: #eee;
	color: #000;
	border: 1px solid #666;
	position: absolute;
	font-size: 14px;
}
.formhelp:after {
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	left: .1em;
	bottom: -1em;
	border: .5em solid transparent;
	border-top-color: #666;
}

/*
 * index.php
 */
#listmail { width: 100%; line-height: 1.2em; }
#listmail a { text-decoration: none; font-size: .9em; }

#listmail div.row { cursor: pointer; border-bottom: 1px dotted #666; overflow: hidden; height: 1.35em; }
#listmail div.row:hover { background-color: #ff0; }
#listmail div.shade { background-color: #eee; }
#listmail div.noshade { background-color: #fff; }
#listmail div.new { background-color: lightgreen; }

#listmail span { display: inline-block; margin: 0; vertical-align: top; padding-top: .1em; }
#listmail span.checkbox { text-align: center; }
/*This only works with Opera ...
 * #listmail span.checkbox > input { width: 3em; }
 */
#listmail span.flags { width: 2em; text-align: left; }
#listmail span.subject { width: 20em; text-align: left; }
#listmail span.from { width: 20em; text-align: right; }
#listmail span.date { width: 9em; text-align: right; }

#listmail div.header { border: 1px solid black; background-color: #ddd; }
#listmail div.header span { text-align: center; font-weight: bold; }

/***
 * viewmail.html
 */
#header { background-color: #fffee4; width: 98%; }
#header span { display: inline-block; width: 10em; }

#body {
	font-family: "DejaVu Sans Mono", "Consolas", monospace;
	width: 98%;
	white-space: pre-wrap;
}
#body span.quote { color: blue; }
#body span.quote a { color: #000; }
#body span.signature { color: #777; }

#attachments { width: 100%; background-color: #fffee4; border: 1px solid black; margin-bottom: 2em; }
#attachments th, caption { background-color: #fffee4; }
#attachments td { text-align: center; border: 1px #000 solid; }
#attachments td.size { width: 4em; }
#attachments td.mime { width: 20em; }
#attachments td.name { width: 20em; }

/***
 * newmail.html
 ***/
#newmail #basicheader > input { width: 25em; }

.confirmdialog {
	position: absolute;
	left: 50%;
	top: 50%;
	padding: .2em .5em;
	padding-bottom: 1em;
	background-color: #fff;
	min-width: 200px;

	border: 1px solid #b7b7b7;
	box-shadow: 2px 2px 6px #b7b7b7;
	-moz-box-shadow: 2px 2px 6px #b7b7b7;
	-webkit-box-shadow: 2px 2px 6px #b7b7b7;

	text-align: center;
}

.confirmdialog .yes, .confirmdialog .no {
	border: 1px solid black;
	border-radius: 4px;
	color: #000;
	background-color: #ddd;
	padding: .2em .4em;
	cursor: pointer;
}

.confirmdialog .yes {
	margin-right: .5em;
}

.confirmdialog .no {
	margin-left: .5em;
}

#notify {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 42;
	width: 100%;
	background-color: lightgreen;
	color: #000;
	border-top: 2px dotted #000;
	text-align: center;
	font-size: 1.2em;
	padding: 1em 0;
}
